import styled from '@emotion/styled';
import React from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

const TextAreaMain = styled.div`
	background-color: #f6f6f6;
	border-radius: 4px;
	.ant-input-textarea::after {
		bottom: -24px;
	}
`;

const TextAreaContentContianer = styled(TextArea)`
	textarea {
		outline: none;
		border: 0;
	}
	&::after {
		bottom: 0;
		border: 0;
	}
	textarea:hover {
		border: 0;
	}
`;

interface TextAreaContentProps {
	content: string | undefined;
	readonly?: boolean;
	maxLength?: number;
}

const TextAreaContent = (props: TextAreaContentProps) => {
	const { content = '', readonly = false, maxLength = 2000 } = props;
	return (
		<TextAreaMain>
			<TextAreaContentContianer
				dangerouslySetInnerHTML={content}
				bordered={false}
				showCount
				maxLength={maxLength}
				style={{ height: 220, outline: 'nonde', resize: 'none' }}
				readOnly={readonly}
			></TextAreaContentContianer>
		</TextAreaMain>
	);
};

export default TextAreaContent;
